<template>
  <div id="main">
    <div class="content">
      
      <Head :isCollapse="isCollapse" @collapseMenu="collapseMenu" ref="child"></Head>
      
      
      <div class="draw">
        <div class="drawer" v-if="!isCollapse" @click="hidebox"></div>
        <div class="left" v-if="!isCollapse" :class="{'':isCollapse,'test':!isCollapse}">
          <Menu @hidebox="hidebox"></Menu>
        </div>
        <div class="right">
          <tags-view/>
          <div class="maincontent">
            <router-view></router-view>
          </div>
        </div>
      </div>
    
    
    </div>
  </div>
</template>

<script>
  //ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。
  //<Head ref="child"></Head>
  //this.$ref.child.test() 父组件调用子组件里的函数方法
  import axios from 'axios'
  import Vue from 'vue'
  import Menu from '@/components/layout/global/menu.vue'
  import Head from '@/components/layout/global/header.vue'
  import TagsView from '@/components/layout/global/tagsview.vue'
  
  export default {
    component: 'home',
    data() {
      return {
        isCollapse: false,
        name: 'admin',
        path: '',
        path1: '',
        instance: '',
        instance1: '',
        instance2: '',
        instance3: '',
        instance4: '',
        instance5: '',
        instance6: '',
        instance7: '',
      }
    },
    components: {
      Menu,
      Head,
      TagsView
    },
    created() {
      axios.post(this.url + '/user/iflogin').then(res => {
        this.unlogin(res.data.code)
        this.name = res.data.data;
        if (res.data.code == 200) {
          
          //正式
          // this.path = "wss://192.168.177.22:443/websocket/" + this.name;
          //测试
          this.path = "wss://192.168.175.32:443/websocket/" + this.name;
          
          //this.path = "ws://172.16.4.44:9091/websocket/" + this.name;
          
          this.init();
        }
      });
  

    },
    methods: {
      collapseMenu() {
        this.isCollapse = !this.isCollapse;
        if (this.isCollapse == false) {
          document.documentElement.style.overflow = 'hidden';
        }
        if (this.isCollapse == true) {
          document.documentElement.style.overflow = 'auto';
        }
      },
      //隐藏菜单栏以及遮罩层
      hidebox() {
        this.isCollapse = true
        if (this.isCollapse == true) {
          document.documentElement.style.overflow = 'auto';
        }
      },
      init: function () {
        if (typeof (WebSocket) === "undefined") {
          alert("您的浏览器不支持socket")
        } else {
          // 实例化socket
          this.socket = new WebSocket(this.path)
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
          this.socket.onclose = this.close
        }
      },
      open: function () {
        // console.log("socket连接成功")
      },
      error: function () {
        // console.log("连接错误")
      },
      getMessage: function (msg) {
        this.data = JSON.parse(msg.data);
        //专员反馈面试时间 ,专员放弃面试,助理进入简历反馈-已反馈页面
        if (this.data.es == 'FEEDBACK') {
          this.open1();
        }
        ;
        
        //助理提醒招聘上传任务简历 专员进入简历上传页面
        if (this.data.es == 'UPLOAD_RESUME') {
          this.open2();
        }
        ;
        
        //助理进行简历反馈-通过 专员进入简历反馈-已反馈页面
        if (this.data.es == 'HR_FEEDBACK_PS') {
          this.open3();
        }
        ;
        
        //助理进行简历反馈-不通过
        if (this.data.es == 'HR_FEEDBACK_PF') {
          this.open4();
        }
        ;
        
        //专员上传简历后提醒助理 助理进入简历推送页面
        if (this.data.es == 'PUSH_RESUME') {
          this.open5();
        }
        ;
        
        //组员上传简历，提示组长，组长进入简历审核页面
        if (this.data.es == 'REVIEW_RESUME') {
          this.open6();
        }
        ;
        
        //组员跳转今日任务组员页面
        // HR_TADAYTASK
        if (this.data.es == 'HR_TADAYTASK') {
          this.open7();
        }
        ;
        //组长跳转今日任务组长页面
        if (this.data.es == 'LEADER_TADAYTASK') {
          this.open8();
        }
        ;
        
        //其他 不跳页面
        if (this.data.es == 'NM') {
          this.$notify.info({
            title: '消息',
            message: this.data.tr,
            duration: 0
          });
          var vm = this;
          window.Notification.requestPermission(function (status) {
            var n = new Notification('消息', {body: vm.data.tr, requireInteraction: true});
            n.onclick = function () {
              window.focus()
              n.close()
            }
          });
        }
        ;
      },
      //助理进入简历反馈-已反馈页面
      open1() {
        const h = this.$createElement;
        this.instance = this.$notify({
          title: '消息',
          message: h('a', {
            on: {
              click: this.resumefeedback
            },
            style: {
              cursor: "pointer",
            },
          }, this.data.tr),
          duration: 0,
        })
        var vm = this;
        window.Notification.requestPermission(function (status) {
          var n = new Notification('消息', {body: vm.data.tr, requireInteraction: true});
          n.onclick = function () {
            window.focus()
            vm.$router.push('/home/resumefeedback');
            setTimeout(() => {
              vm.$bus.$emit("notify")
            }, 100)
            n.close()
          }
        });
      },
      resumefeedback() {
        this.close1();
        this.$router.push ('/home/resumefeedback');
        setTimeout(() => {
          this.$bus.$emit("notify")
        }, 100)
      },
      close1() {
        this.instance.close();
      },
      
      //专员进入简历上传页面
      open2() {
        const h = this.$createElement;
        this.instance1 = this.$notify({
          title: '消息',
          message: h('a', {
            on: {
              click: this.resumeupload
            },
            style: {
              cursor: "pointer",
            },
          }, this.data.tr),
          duration: 0,
        });
        var vm = this;
        window.Notification.requestPermission(function (status) {
          var n = new Notification('消息', {body: vm.data.tr, requireInteraction: true});
          n.onclick = function () {
            window.focus()
            vm.$router.push('/home/resumeupload');
            n.close()
          }
        });
      },
      resumeupload() {
        this.close2();
        this.$router.push ('/home/resumeupload');
      },
      close2() {
        this.instance1.close();
      },
      
      //专员进入简历反馈-已反馈页面
      open3() {
        const h = this.$createElement;
        this.instance2 = this.$notify({
          title: '消息',
          message: h('a', {
            on: {
              click: this.resumefeedback1
            },
            style: {
              cursor: "pointer",
            },
          }, this.data.tr),
          duration: 0,
        });
        var vm = this;
        window.Notification.requestPermission(function (status) {
          var n = new Notification('消息', {body: vm.data.tr, requireInteraction: true});
          n.onclick = function () {
            window.focus();
            vm.$router.push('/home/resumefeedback1');
            setTimeout(() => {
              vm.$bus.$emit("notify1")
            }, 100)
            n.close()
          }
        });
      },
      resumefeedback1() {
        this.close3();
        this.$router.push ('/home/resumefeedback1');
        setTimeout(() => {
          this.$bus.$emit("notify1")
        }, 100)
      },
      close3() {
        this.instance2.close();
      },
      //专员进入简历反馈-未通过简历页面
      open4() {
        const h = this.$createElement;
        this.instance3 = this.$notify({
          title: '消息',
          message: h('a', {
            on: {
              click: this.resumefeedback2
            },
            style: {
              cursor: "pointer",
            },
          }, this.data.tr),
          duration: 0,
        });
        var vm = this;
        window.Notification.requestPermission(function (status) {
          var n = new Notification('消息', {body: vm.data.tr, requireInteraction: true});
          n.onclick = function () {
            window.focus()
            vm.$router.push('/home/resumefeedback1');
            setTimeout(() => {
              vm.$bus.$emit("notify2")
            }, 100)
            n.close()
          }
        });
      },
      resumefeedback2() {
        this.close4();
        this.$router.push ('/home/resumefeedback1');
        setTimeout(() => {
          this.$bus.$emit("notify2")
        }, 100)
      },
      close4() {
        this.instance3.close();
      },
      //助理进入简历推送页面
      open5() {
        const h = this.$createElement;
        this.instance4 = this.$notify({
          title: '消息',
          message: h('a', {
            on: {
              click: this.resumepush
            },
            style: {
              cursor: "pointer",
            },
          }, this.data.tr),
          duration: 0,
        });
        var vm = this;
        window.Notification.requestPermission(function (status) {
          var n = new Notification('消息', {body: vm.data.tr, requireInteraction: true});
          n.onclick = function () {
            window.focus()
            vm.$router.push('/home/resumepush');
            n.close()
          }
        });
      },
      resumepush() {
        this.close5();
        this.$router.push ('/home/resumepush');
      },
      close5() {
        this.instance4.close();
      },
      
      //组长进入简历审核页面
      open6() {
        const h = this.$createElement;
        this.instance5 = this.$notify({
          title: '消息',
          message: h('a', {
            on: {
              click: this.presentedresume
            },
            style: {
              cursor: "pointer",
            },
          }, this.data.tr),
          duration: 0,
        });
        var vm = this;
        window.Notification.requestPermission(function (status) {
          var n = new Notification('消息', {body: vm.data.tr, requireInteraction: true});
          n.onclick = function () {
            window.focus()
            vm.$router.push('/home/presentedresume');
            n.close()
          }
        });
      },
      presentedresume() {
        this.close6();
        this.$router.push ('/home/presentedresume');
      },
      close6() {
        this.instance5.close();
      },
      open7() {
        const h = this.$createElement;
        this.instance6 = this.$notify({
          title: '消息',
          message: h('a', {
            on: {
              click: this.todaytask
            },
            style: {
              cursor: "pointer",
              color: "red"
            },
          }, this.data.tr),
          showClose: false,
          duration: 0,
        });
        var vm = this;
        window.Notification.requestPermission(function (status) {
          var n = new Notification('消息', {body: vm.data.tr, requireInteraction: true});
          n.onclick = function () {
            window.focus()
            vm.$router.push('/home/todaytask');
            n.close()
          }
        });
      },
      todaytask() {
        this.$router.push ('/home/todaytask');
        this.close7();
      },
      close7() {
        this.instance6.close();
      },
      open8() {
        const h = this.$createElement;
        this.$nextTick(() => {
          this.instance7 = this.$notify({
            title: '消息',
            message: h('a', {
              on: {
                click: this.todaytaskleader
              },
              style: {
                cursor: "pointer",
                color: "red"
              },
            }, this.data.tr),
            showClose: false,
            duration: 0,
          });
        })
        var vm = this;
        window.Notification.requestPermission(function (status) {
          var n = new Notification('消息', {body: vm.data.tr, requireInteraction: true});
          n.onclick = function () {
            window.focus()
            vm.$router.push('/home/todaytaskleader');
            n.close()
          }
        });
      },
      todaytaskleader() {
        this.$router.push ('/home/todaytaskleader');
        this.close8();
      },
      close8() {
        this.instance7.close();
      },
      send: function (data) {
        this.socket.send(JSON.stringify(data))
      },
      close: function () {
        // console.log("socket已经关闭")
      }
    },
    mounted() {
      if (this.isCollapse == false) {
        document.documentElement.style.overflow = 'hidden';
      }
      // 监听浏览器回退事件
      // function backListen () {
      //   if (window.history && window.history.pushState) {
      //     $(window).on('popstate', function () { // 点击后退会触发popstate事件
      //       history.pushState(null, null, document.URL);
      //     });
      //   }
      // }
      // window.onload = function() {
      //   backListen();
      // }
    },
    destroyed() {
      // 销毁监听
      this.socket.onclose = this.close
    }
  }
</script>

<style scoped>
  .left {
    width: 90px;
    display: inline-block;
  }
  
  .right {
    height: 100%;
    padding: 7px 20px 0px;
  }
  
  .draw {
    position: relative;
    min-height: 867px;
    overflow: hidden;
    background-color: #f4f7f9;
  }
  
  .drawer {
    background: #000;
    opacity: 0.3;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
  }
  
  .test {
    position: absolute;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    margin-right: 0;
  }

</style>
